<template>
  <div class="home">
    <div v-if="$route.path == '/home'" class="home-low">
      <van-search
        disabled
        v-model="SearchVal"
        shape="round"
        background="#fff"
        placeholder="请输入搜索关键词"
        @click="gopop"
      />
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="darkred">
        <van-swipe-item v-for="item in banner" :key="item.id">
          <img
            :src="item.image_url"
            width="100%"
            style="display: block;"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>
      <van-grid :column-num="5">
        <van-grid-item
          :icon="item.icon_url"
          :text="item.name"
          v-for="item in channel"
          :key="item.id"
        />
      </van-grid>
      <div class="title">品牌制造商直供</div>
      <ul class="brand">
        <li v-for="item in brandList" :key="item.id">
          <img :src="item.pic_url" alt="" />
          <h3>{{ item.name }}</h3>
          <span>{{ item.floor_price | filterMoney }}</span>
        </li>
      </ul>
    </div>
    <transition name="van-slide-right">
      <router-view v-if="$route.path == '/home/popup'"></router-view>
    </transition>
  </div>
</template>

<script>
import { GetHomeDataAPI } from '../request/api'
export default {
  name: 'home',
  data () {
    return {
      SearchVal: '',
      banner: [],
      channel: [],
      brandList: [],
      newGoodsList: [],
      hotGoodsList: [],
      topicList: [],
      categoryList: []
    }
  },
  created () {
    GetHomeDataAPI().then(res => {
      console.log(res.data)
      if (res.errno == 0) {
        const {
          banner,
          channel,
          brandList,
          newGoodsList,
          hotGoodsList,
          topicList,
          categoryList
        } = res.data
        this.banner = banner // 获取到banner数组
        this.channel = channel // 获取到channel数组
        this.brandList = brandList // 获取到brandList数组
        this.newGoodsList = newGoodsList // 获取到newGoodsList数组
        this.hotGoodsList = hotGoodsList // 获取到hotGoodsList数组
        this.topicList = topicList // 获取到topicList数组
        this.categoryList = categoryList // 获取到categoryList数组
      }
    })
  },
  methods: {
    gopop () {
      this.$router.push('./home/popup')
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  padding-bottom: 50px;
}
.fade-enter,
.fade-leave-to {
  right: -100%;
}
.fade-enter-active,
.fade-leave-active {
  transition: right 1s linear;
}
.fade-enter-to,
.fade-leave {
  right: 0;
}
.title {
  background: #fff;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  margin-top: 0.2rem;
}
.brand {
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    width: 49%;
    position: relative;
    margin-bottom: 0.1rem;
    img {
      width: 100%;
      display: block;
      filter:brightness(1.1)
    }
    h3 {
      position: absolute;
      left: 0.1rem;
      top: 0;
      line-height: 0.4rem;
    }
    span {
      position: absolute;
      left: 0.1rem;
      top: 0.4rem;
      line-height: 0.2rem;
      height: 0.2rem;
      color: darkred;
    }
  }
}
</style>
